<template>
  <div :id="detail.identifier" :style="animationClass" class='view-image-common'>
    <template>
      <img :src="imageURL" :style="[filterClass]" crossorigin="anonymous" @dragstart.prevent @dragover.prevent
           @drop.prevent/>
    </template>
    <svg id="svg" style="width: 100%;height:100%">
      <defs>
        <filter :id="detail.identifier + '_svg'">
          <feColorMatrix :values="hexTofeColorMatrix(detail.style.foreColor)" color-interpolation-filters="sRGB"
                         type="matrix"/>
        </filter>
      </defs>
    </svg>
    <div v-show="false">{{ preview }}{{ colorChange }}</div>
  </div>
</template>

<script>
import BaseView from './View';
import topoUtil from '@/views/zutai/components/topo/util/topo-util';
import {mapState} from 'vuex'
//动作特效
import anime from 'animejs'
import {removeAnimate, translateAnimate} from "../util/animate";

export default {
  name: 'view-image-common',
  extends: BaseView,
  props: {},
  data() {
    return {
      filterClass: {
        width: '100%',
        height: '100%',
        filter: '',
        position: 'absolute',
        animation: this.detail.hdClassName + ' 5s infinite'
      },
      animationClass: {},
    }
  },
  computed: {
    colorChange() {
      if (this.detail.style.foreColor && this.detail.style.isFilter) {
        this.filterClass.marginLeft = '';
        this.filterClass.filter = 'url(#' + this.detail.identifier + '_svg)'
        this.animationClass = {}
      } else if (this.detail.style.foreColor && this.detail.style.isFilter == false) {
        this.filterClass.marginLeft = '-10000px'
        this.filterClass.filter = 'drop-shadow(5000px 0px ' + this.detail.style.foreColor + ')'
        this.animationClass = {
          'overflow': 'hidden',
          'position': 'relative'
        };
      } else {
        this.animationClass = {}
        this.filterClass.marginLeft = '';
        this.filterClass.filter = '';
      }
      return this.detail.style.foreColor;
    },
    imageURL: function () {
      if (this.detail.style.url) {
        return this.detail.style.url;
      }
    },
    preview() {
      if (this.editMode && this.detail.dataAction.translateList && this.detail.dataBind.hdAction) {
        let translates = [];
        this.detail.dataAction.translateList.forEach(element => {
          if (element.direction == '竖直') {
            translates.push({translateY: -element.position})
          } else {
            translates.push({translateX: element.position})
          }
        });
        let domId = document.getElementById(this.detail.identifier);
        removeAnimate(domId)
        translateAnimate(domId, translates, this.detail.dataAction.duration * 1000, true, false);
      }
    },
  },
  watch: {
    paramValue(newVal, oldVal) {
      //颜色变化
      let paramValue = newVal;
      let foreColor = "";
      this.detail.dataBind.stateList.forEach(element => {
        let isSure = topoUtil.judgeSize(element.paramCondition, paramValue, element.paramData);
        if (isSure) {
          foreColor = element.foreColor;
        }
      });
      if (foreColor) {
        this.detail.style.foreColor = foreColor
      }
    },
  },
  methods: {
    //滤镜颜色
    hexTofeColorMatrix(hex) {
      // console.log('hex',hex);
      if (!hex) {
        return '';
      }
      hex = hex.replace('#', '')
      let RGB = [];
      let numberList = [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0];
      for (let i = 0; i < hex.length; i += 2) {
        const firstDigit = parseInt(hex[i], 16);

        const firstDigitPartial = firstDigit * 16;

        let RGBValue = parseInt(hex[i + 1], 16) + firstDigitPartial;

        RGBValue = RGBValue / 255;

        RGBValue = RGBValue.toFixed(2);

        RGB.push(RGBValue);
      }

      const red = RGB[0];
      const green = RGB[1];
      const blue = RGB[2];

      numberList[0] = red;
      numberList[6] = green;
      numberList[12] = blue;
      // console.log(numberList.join(' '));
      return numberList.join(' ')
    },
  }

}
</script>

<style lang="scss" scoped>
.view-image-common {
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

// //显示隐藏
// .auto-show {
//     display: block
// }

// .auto-hide {
//     display: none
// }

// // 自动旋转-快
// .auto-rotate-fast {
//     width: 100px;
//     height: 100px;
//     animation: zc 0.5s linear infinite;
//     transform-origin: center center;
// }

// //自动旋转-中
// .auto-rotate-not-fast {
//     width: 100px;
//     height: 100px;
//     animation: zc 1s linear infinite;
//     transform-origin: center center;
// }

// //自动旋转-慢
// .auto-rotate-slow {
//     width: 100px;
//     height: 100px;
//     animation: zc 2s linear infinite;
//     transform-origin: center center;
// }

// @keyframes zc {
//     0% {
//         transform: rotate(0deg);
//     }

//     100% {
//         transform: rotate(360deg);
//     }
// }

// //闪烁
// .twinkle {
//     animation: twinkle-item 1s 2s both infinite;
//     width: 100px;
//     height: 100px;
// }

// @keyframes twinkle-item {
//     0% {
//         transform: scale(1);
//     }

//     10%,
//     20% {
//         transform: scale(0.5) rotate(-3deg);
//     }

//     30%,
//     50%,
//     70%,
//     90% {
//         transform: scale(1) rotate(3deg);
//     }

//     40%,
//     60%,
//     80% {
//         transform: scale(1) rotate(-3deg);
//     }

//     100% {
//         transform: scale(0.9) rotate(0);
//     }
// }
</style>
